<template>
  <div>
    <a-collapse :default-active-key="[1, 2, 3, 4, 5]" :bordered="false">
      <a-collapse-item header="线条设置" :key="2">
        <div class="chooseBox">
          <p class="titles">样式设置</p>
          <a-radio-group v-model="currentTemp.lineType" @change="currentTemp.noticeText = ''">
            <a-radio :value="'solid'">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">实线</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="'dashed'">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">虚线</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="'dotted'">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">点状线</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </div>
        <div class="chooseBox">
          <p class="titles">线条颜色</p>

          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.lineColor }"
            @click="changSketch"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.lineColor"
            :show="colorForm.showSketch"
            @changButton="changSketchButton"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.lineColor = '#ffffff'"
            >重置</a-button
          >
        </div>
        <div class="chooseBox">
          <p class="title">线条高度</p>
          <div class="radioBox" style="padding: 0px">
            <a-input type="text" v-model="currentTemp.lineHeight" placeholder="请输入线条高度" />
          </div>
        </div>
      </a-collapse-item>

      <a-collapse-item header="间距(px)" :key="4">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="3">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { Sketch } from '@ans1998/vue3-color'
  const emit = defineEmits(['change'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const typeLists = ref([
    { id: 1, name: '自定义' },
    { id: 2, name: '系统功能' },
  ])
  const colorForm = ref({ showSketch: false })
  const currentTemp = computed(() => props.config)
  console.log(currentTemp.value)
  const clickdianType = (val: any) => {
    currentTemp.value.iconType = val
  }
  const changSketchButton = (item) => {
    colorForm.value.showSketch = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.lineColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketch = () => {
    colorForm.value.showSketch = true
  }
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .chooseBox {
    width: 100%;
    margin: 0px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    .titles {
      width: 100%;
      display: block;
      margin-bottom: 5px;
    }
    .beizhu {
      font-size: 11px;
      color: #86909c;
      margin-top: 5px;
    }
    .radioBox {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 4px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      box-sizing: border-box;
    }
  }
  .items {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 12px;
    position: relative;
    .titles {
      min-width: 60px;
      margin-right: 20px;
      display: inline-block;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 0px;
      z-index: 1000000;
    }
  }
  .pageBox {
    width: 100%;
    height: 36px;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f2f3f5;
    img {
      width: 30px;
    }
    .iconBox {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .activeIcon {
      width: 50%;
      height: 100%;
      background-color: #f2f3f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
